import { useEffect, useRef } from "react";
import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { QueryPage } from "@components";
import useFieldsORColumns from "./config";
import { weatherFind, weatherAdd, weathereEdit } from "@apis/queryWeatherApi";
import moment from 'moment'

import { useMainContext } from '@contexts/MainContext'

const QueryWeather = () => {
  const { isButtomShow } = useMainContext()
  const modalRef = useRef("modalRef");

  useEffect(() => {
    const newHour = moment(new Date()).startOf('hour').format('YYYY-MM-DD HH:mm')
    console.log('newHour==>', newHour);
  },[])

  //编辑
  const edit = (row) => {
    modalRef.current.showModal(row);
    modalRef.current.setModalLoading(true)
    setTimeout(() => {
      findWeatherType(modalFormRef)
      getUnitArea(modalFormRef, row, modalRef.current.setModalLoading)
    }, 0);
  };

  const { queryFormRef, fields, columns, modalFormRef, modalFields, findWeatherType, getUnitArea} = useFieldsORColumns(edit)

  const formProps = {
    formRef: queryFormRef,
    fields: fields,
    initialValues: {
      status: '1',
    },
    extraTail: (
      <>
        {isButtomShow('020101') && <Button
          icon={<PlusOutlined />}
          onClick={() => modalRef.current.showModal()}
        >
          新增
        </Button>}
      </>
    ),
  };


  /** 定义表格属性 */
  const tableProps = {
    rowKey: "weatherDataId",
    columns: columns,
  };

  const modalFormProps = {
    formRef: modalFormRef,
    fields: modalFields,
    initialValues: {
      status: '1',
    },
  };

  return (
    <QueryPage
      formProps={formProps}
      tableProps={tableProps}
      queryApi={weatherFind}
      modalRef={modalRef}
      modalFormProps={modalFormProps}
      addApi={weatherAdd}
      updataId="weatherDataId"
      updataApi={weathereEdit}
    />
  );
};

export default QueryWeather;
